import React from 'react';
import {
    Row,
    Col,
    Table,
    Form,
    Card
} from 'antd';
import axios from 'axios';
import intercept from '../../utils/intercept';
import { config } from 'utils';
import './less/common.less';

class BalanceAlarms extends React.Component {
    constructor(props) {
        super(props);
        const user = JSON.parse(sessionStorage.getItem("user"));
        this.state = {
            dataSource: [],
            loading: true,
            user: user,
            pagination: {
                current: 1,
                pageSize: 10
            },
            onChange: this.onChange,
            keyword: ''

        };
    };
    componentDidMount() {
        this.getBalance();
    }

    search(value) {
        this.setState({ keyword: value });
        this.getBalance({ keyword: value });
    }
    onChange = (pagination, filters, sorter) => {
        this.getBalance({
            sortField: sorter.field,
            sortOrder: sorter.order,
            page: pagination.current,
            keyword: this.state.keyword,
            ...filters
        });
    };

    getBalance(params = {}) {
        const token = sessionStorage.getItem("token");
        this.setState({ loading: true });
        axios.get(`${config.api}Marketing/GetWxLoginInfo`, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
            if (data.data.result) {
                data.data.loginInfo.forEach(function (item, i) {
                    item.key = i
                })
                this.setState({ dataSource: data.data });
            }
        })
        .catch(err => {
            intercept;
        })
    }

    render() {
        const column = [
            {
                title: "日期",
                dataIndex: "date"
            }, {
                title: "登陆次数",
                dataIndex: "loginTimes"
            }, {
                title: "登陆人数",
                dataIndex: "loginPersons"
            }, {
                title: "新增人数",
                dataIndex: "newPersons"
            }
        ];

        return (
            <div>
                <Row gutter={16}>
                    <Col span={8}>
                        <Card title="小程序登录统计" bordered={false}>
                            <Table className="tables"
                                columns={column}
                                dataSource={this.state.dataSource.loginInfo} />
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card title="二维码统计" bordered={false}>
                            <Table className="tables"
                                columns={column}
                                dataSource={this.state.dataSource.loginInfo} />
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card title="分享统计" bordered={false}>
                            <Table className="tables"
                                columns={column}
                                dataSource={this.state.dataSource.loginInfo} />
                        </Card>
                    </Col>
                </Row>

            </div>
        )
    }

}
const BalanceAlarm = Form.create()(BalanceAlarms);
export default BalanceAlarm
